<template>
  <div v-loading="isLoading"
       class="container">
    <el-card>
      <template #header>
        <div class="table_tool">
          <el-button type="primary"
                     icon="el-icon-plus"
                     @click="showAddOrEdit = true">新增</el-button>
        </div>
      </template>

      <el-table :data="tableData"
                border
                stripe>
        <el-table-column prop="name"
                         label="小区名称" />
        <el-table-column prop="sub_admin_name"
                         label="管家姓名" />
        <el-table-column prop="phone"
                         label="管家手机号" />
        <el-table-column label="操作"
                         width="120px"
                         align="center">
          <template slot-scope="{ row }">
            <el-button type="text"
                       @click="openEdit(row)">编辑</el-button>
            <el-button type="text"
                       class="red"
                       @click="delById(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination background
                     layout="total, sizes, pager, jumper"
                     :current-page="searchForm.page"
                     :page-sizes="[10,20, 30, 50, 100]"
                     :page-size="searchForm.page_size"
                     :total="tableTotal"
                     @size-change="changeSize"
                     @current-change="changeCurrent" />
    </footer>

    <el-dialog :title="(communityForm.$id ? '编辑' : '新增') + '小区'"
               :visible.sync="showAddOrEdit"
               width="800px"
               @closed="() => closeDialog()">
      <el-form ref="communityForm"
               :model="communityForm"
               label-width="6em">
        <el-form-item prop="$id"
                      hidden />
        <el-form-item label="小区名称"
                      prop="name">
          <el-input v-model="communityForm.name"
                    placeholder="请输入小区区名称" />
        </el-form-item>
        <el-form-item label="管理员姓名"
                      prop="sub_admin_name">
          <el-input v-model.number="communityForm.sub_admin_name"
                    placeholder="请输入小区管理员姓名" />
        </el-form-item>
        <el-form-item label="联系方式"
                      prop="phone">
          <el-input v-model="communityForm.phone"
                    placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="经度"
                      prop="longitude">
          <el-input v-model.number="communityForm.longitude"
                    placeholder="请输入经度" />
        </el-form-item>
        <el-form-item label="纬度"
                      prop="latitude">
          <el-input v-model.number="communityForm.latitude"
                    placeholder="请输入纬度" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary"
                   :loading="loading.update"
                   @click="submit()">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/api'
import { table, addOrEdit } from '@/utils/mixins'
export default {
  mixins: [table, addOrEdit],
  data: () => ({
    showAddOrEdit: false,
    searchName: '',
    isLoading: true,
    tableData: [],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      page: 1, // 当前页码
      per_page: 10 // 每页条数
    },
    communityForm: {
      $id: '',
      name: '', // 小区名称
      sub_admin_name: '', // 管理员名字
      phone: '', // 小区管理员手机号
      longitude: 0, // 经度
      latitude: 0 // 纬度
    }
  }),

  created () {
    this.getPermissionList()
  },

  methods: {

    getPermissionList () {
      this.loading = true
      API.getCommunityList(this.searchForm).then(({ data }) => {
        data.items.forEach(item => {
          item.phone = item.phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2')
        })
        this.tableData = data.items
        this.tableTotal = data.total
      }).catch((err) => {
        this.tableData = []
        this.tableTotal = 0
      }).finally(() => {
        this.isLoading = false
      })
    },

    // 分页
    changeSize (val) {
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getPermissionList()
    },

    // 分页
    changeCurrent (val) {
      this.searchForm.page = val
      this.getPermissionList()
    },

    // 打开弹窗
    openEdit (obj) {
      this.communityForm.$id = obj.id
      this.communityForm.name = obj.name
      this.communityForm.sub_admin_name = obj.sub_admin_name
      this.communityForm.phone = obj.phone
      this.showAddOrEdit = true
    },

    // 关闭弹窗
    closeDialog () {
      this.showAddOrEdit = false
      this.restForm()
    },

    // 提交
    submit () {
      const _that = this
      if (!this.communityForm.name.trim()) return this.$message.error('小区名称不可为空~~')
      if (!this.communityForm.sub_admin_name.trim()) return this.$message.error('管理员名称不可为空~~')
      if (!this.communityForm.phone.trim()) return this.$message.error('管理员手机不可为空~~')

      const data = {
        name: this.communityForm.name,
        sub_admin_name: this.communityForm.sub_admin_name,
        phone: this.communityForm.phone
      }

      if (this.communityForm.$id) {
        const id = this.communityForm.$id
        API.editFCommunity(id, data)
          .then(({ data }) => {
            _that.$message.success('编辑成功！')
          }).catch((err) => {
          }).finally(() => {
            _that.restForm()
            _that.getPermissionList()
          })
      } else {
        API.addFCommunity(data)
          .then(({ data }) => {
            _that.$message.success('新增成功！')
          }).catch((err) => {
          }).finally(() => {
            _that.restForm()
            _that.getPermissionList()
          })
      }
    },

    delById (id) {
      const _that = this
      this.$confirm(`是否删除改条小区？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          API.deleteFCommunity(id)
            .then(({ data }) => {
            }).catch((err) => {
            }).finally(() => {
              _that.getPermissionList()
            })
        })
        .catch(() => {
        })
    },

    // 重置表单
    restForm () {
      this.communityForm.$id = '',
        this.communityForm.name = '', // 小区名称
        this.communityForm.phone = '', // 小区管理员手机号
        this.communityForm.sub_admin_name = ''// 管理员名字
      this.showAddOrEdit = false
    }

  }
}
</script>

<style lang="scss" scoped></style>
